<!-- /**/ -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App </title>
</head>
<body>
    <div class="todo-app">
        <div class="title"> 林静月光殷的Todolist </div>
        <div class="todo-from">
            <input class="todo-input" type="text" placeholder="Add a todo">
            <!-- placeholder:占位符 
              用于在输入框中显示提示信息 
              当输入框中没有输入任何内容时，会显示该提示信息；
              一旦用户开始输入内容，该提示信息会自动消失-->
            <div class="todo-button">add todo</div>
            <!-- <button>Add Button</button> 
             我原本以为用button写的 
             没想到人家说 
             div＋css 能解决大部分工作 
             所以，他拿div写button去了 -->
        </div>
        <div class="item completed">
            <!--
             一个盒子可以同时拥有多个类名  类名之间用空格隔开
              几个类名的属性都会拥有
             -->
            <div>
                <input type="checkbox">
                <span class="name">吃饭</span>
                <!-- 
                <span>是一个行内元素，用于组合文档中的行内元素
                <div>是块级元素，会在页面上产生换行，
                常用于对较大块的内容进行分组和布局。
                而<span>是行内元素，主要用于对行内文本的部分内容进行样式设置或操作
                     -->
            </div>
                <div class="del">del</div>
        </div>
        <div class="item">
            <div>
                <input type="checkbox">
                <span class="name">吃饭</span>
            </div>
                <div class="del">del</div>
        </div>
        <div class="item">
            <div>
                <input type="checkbox">
                <span class="name">吃饭</span>
            </div>
                <div class="del">del</div>
        </div>
    </div>
    <style>
        .completed{
            text-decoration: line-through;
            /*用于实现删除线效果*/
            opacity: .4;
            /*设置透明度*/
        }
        .del{
            color: red;
        }
        .item{
            width: 80%;
            height: 50px;
            margin: auto;
            padding: 16px;
            box-sizing: border-box;
            border-radius: 20px;
            display: flex;
            box-shadow: rgba(149,157 ,165,.2) 0px 8px 20px;
            display : flex;
            align-items:center;
            justify-content: space-between;
            /*让盒子里的元素平分里面的空间*/
            margin-bottom: 5px;
        }
        .todo-button{
            user-select: none;
            /*用于控制用户是否能够选中文本或其他元素*/
            cursor: pointer;
            /*用于设置当鼠标悬停在元素上时，
            鼠标指针的样式为指针形状
            （通常是一个小手的图标），
            以提示用户该元素是可以点击的*/
            color: #F0F0F0;
            /*把字的颜色改为白色*/
            border: 1px solid #dfe1e5;
            width: 100px;
            height: 50px;
            /*法二:flex 布局法*/
            display: flex; /* 使用弹性布局 */
            align-items: center; /* 使内容在垂直方向居中 */
            justify-content: center; /* 使内容在水平方向居中，可根据需要保留或删除 */
            /*法一：
            原理是：line - height 决定了文本行的高度，
            当它等于元素的高度时，文本在垂直方向上就会处于中间位置。
            
            /*line-height: 50px;
            text-align: center;
            /* 令 字 水平居中
            
            将行高设置为和元素高度一样，
            实现垂直居中 */
            
            border-radius: 0 20px 20px 0;
            background : linear-gradient(
                to right,
                rgb(0, 149, 255),
                rgb(0, 179, 255),
                 /*rgb数值*/
                rgba(7, 225, 225, 0.826)
                 /*自带的英文标识*/)
        }
        .todo-input{margin-bottom: 20px;
            border: 1px solid #dfe1e5;
            /*边框
            border：边框需要多宽，边框的类型，边框的颜色
            */
            outline: none;
            /* 选中输入框后是否用黑色线条提示 */
            width:60%;
            height:50px;
            border-radius: 20px 0 0px 20px;
            padding-left: 15px;
            box-sizing: border-box;
        }
        .todo-from{
            margin-top: 20px;
            margin-left: 30px;
            display: flex;
            /*让输入框和add todo按钮水平放在一起，在同一行排列*/
            padding-left: 30px;
            box-sizing: border-box;
        }
        body{
            background : linear-gradient(
                to right,
                rgb(195, 0, 255),
                blue,
                rgb(0, 179, 255),
                 /*rgb数值*/
                cyan
                 /*自带的英文标识*/)
        }
        .todo-app{
            width: 98%;
            /*百分比大小的好处：自适应大小*/
            height: 500px;
            background-color: #FFFF;
            /*颜色可以用自带的英文标识，
            也可以用rgb或rgba数值来表示
            还可以用十六进制来表示
            */
            border-radius: 5px;
            /*给div加圆角*/
            margin-top: 40px;
            margin-left: 1%;
            padding-top: 30px;
            box-sizing: border-box;
        }
        .title{
            font-size: 30px;
            /*设置标题的字体大小为 24*/
            font-weight: bold;
            /*设置字体的粗细;
            400 通常表示正常字体，
            700 通常表示粗体;
            normal：等同于 400，表示正常字体;
            bold：等同于 700，表示粗体*/
            text-align: center;
            /*  text-align 是 CSS 中的一个属性，
             主要用于控制文本内容在元素内的水平对齐方式
            
             text-align 可以有以下几种常见取值：
             left：文本左对齐，这是默认值。
              right：文本右对齐。
              justify：两端对齐，使文本在元素内的左右两端都对齐，
              通常会拉伸文本的间距，使每一行的宽度相等。
             center：文本居中对齐
            */
             /* 
                margin-top: 10px;
                触发了margin 塌陷
                margin 塌陷（也称为外边距合并）
                是指当两个垂直方向（上下）的块级元素相邻或者嵌套时，
                它们之间的外边距（margin）会发生合并的现象。
                也就是说，实际的间距不是两个外边距相加，
                而是取其中较大的一个值。
             */
        }
    </style>  
</body>
</html>